<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JSON解析</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/particles.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../css/JSON.css" />
		<script>
			window.onload = function() {
				Particles.init({
					selector: '.background',
					color: '#000000',
					maxParticles: 130,
					connectParticles: true,
					responsive: [{
						breakpoint: 768,
						options: {
							maxParticles: 80
						}
					}, {
						breakpoint: 375,
						options: {
							maxParticles: 50
						}
					}]
				});
			};
		</script>
	</head>
	<body>
		<canvas class="background"></canvas>
		<div id='app'>
			<div class="header">
				<a href="../index.html">
					<button class="btn aperture" alt="Home"></button>
				</a>
				<button class="btn blimp" @click="Go" alt="GO"></button>
				<button class="btn zoomin" @click="clickin" alt="放大"></button>
				<label class="lab" style="font-size: 20px;">{{fontsize}}</label>
				<button class="btn zoomout" @click="clickout" alt="缩小"></button>
			</div>
			<div class="body">
				<textarea :style="{'font-size':fontsize+'px'}" placeholder="请输入JSON数据" @blur="console($event.target.value)" v-model="message"></textarea>
			</div>
			<p id="tips">{{tips}}</p>
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			fontsize: 20,
			message: null,
			tips: "您校验的结果会在这里显示。"
		},
		methods: {
			console: function(msg) {
				//console.log(msg);
			},
			clickin: function() {
				var size = ++this.fontsize;
			},
			clickout: function() {
				var size = this.fontsize;
				if (size <= 15) {
					alert("别点了，最小了")
				} else {
					this.fontsize--;
				}
				console.log(size);
			},
			Go: function() {
				var json = this.message,
					msg;
				try {
					msg = JSON.parse(json);
					if (msg != null) {
						this.tips = "校验为正确JSON格式";
						this.message = JSON.stringify(msg, null, '\t');
						document.getElementById("tips").style.color="#FFFFCC";
					} else {
						this.tips = "JSON文本为空";
						document.getElementById("tips").style.color="#F00000";
					}
				} catch (e) {
					this.tips = "JSON格式错误";
					msg = e;
					document.getElementById("tips").style.color="#ff0000";
					//TODO handle the exception
				}
				console.log(msg);
			}
		}
	})
</script>